<template> 
  <!-- 最外层的盒子 -->
  <div class="box">
    <!-- 头部 -->
    <header class="head">
      <!-- 欢迎来到超市 -->
      <a href="" class="welcome">欢饮来到超市</a>
      <el-dropdown :hide-on-click="false">
        <!-- 显示用户名的下拉框 -->
        <span class="el-dropdown-link">
          Hi,{{ loginMessage.username }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <!-- 下拉框内容 -->
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>黄金糕</el-dropdown-item>
          <el-dropdown-item>狮子头</el-dropdown-item>
          <el-dropdown-item>螺蛳粉</el-dropdown-item>
          <el-dropdown-item disabled>双皮奶</el-dropdown-item>
          <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <!-- 注册 -->
      <el-button type="success" class="register">注册</el-button>
      <!-- 空盒子占位 -->
      <em class="empty"></em>
      <!-- 个人信息 -->
      <el-button type="success" class="right_button">个人信息</el-button>
      <!-- 购物车 -->
      <el-button type="success" class="right_button">购物车</el-button>
      <!-- 我的订单 -->
      <el-button type="success" class="right_button">我的订单</el-button>
      <!-- 联系客服 -->
      <el-button type="success" class="right_button">联系客服</el-button>
      <!-- 退出登录 -->
      <el-button type="success" class="right_button" @click = 'loginOut'>退出登录</el-button>
    </header>
    <!-- 主体 -->
    <body class="body">
      <div class="search_box">
        <!-- 搜索输入框  -->
        <el-input
          placeholder="请输入你搜索商品的关键词"
          v-model="input"
          clearable>
        </el-input>
        <el-button type="primary" icon="el-icon-search" class="search_button">搜索</el-button>
      </div>

      <main class="main_box">
        <div class="card">
          <img src="@/assets/light.png" alt="">
          <a href="">磁悬浮银河球彩色梦幻创意氛围灯</a>
          <p>这是个很漂亮的水晶灯</p>
          <footer>
              <div class="price"><em>￥</em>147</div>
          </footer>
        </div>
        <div class="card">
          <img src="@/assets/light.png" alt="">
          <a href="">磁悬浮银河球彩色梦幻创意氛围灯</a>
          <p>这是个很漂亮的水晶灯</p>
          <footer>
              <div class="price"><em>￥</em>147</div>
          </footer>
        </div>
        <div class="card">
          <img src="@/assets/light.png" alt="">
          <a href="">磁悬浮银河球彩色梦幻创意氛围灯</a>
          <p>这是个很漂亮的水晶灯</p>
          <footer>
              <div class="price"><em>￥</em>147</div>
          </footer>
        </div>
        <div class="card">
          <img src="@/assets/light.png" alt="">
          <a href="">磁悬浮银河球彩色梦幻创意氛围灯</a>
          <p>这是个很漂亮的水晶灯</p>
          <footer>
              <div class="price"><em>￥</em>147</div>
          </footer>
        </div>
      </main>
    </body>
  </div>
</template>

<script>

export default {
  data(){
    return {
        loginMessage:"",
        input:''
    };
  },
  mounted() {
    //   获取登录信息
    this.loginMessage = JSON.parse(sessionStorage.getItem("loginMessage"));
  },
  methods: {
    // 退出登录
    loginOut() {
        this.$confirm("您是否退出登录?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        })
        .then(() => {
          sessionStorage.removeItem("loginMessage");
          this.$router.push("/");
          this.$message({
            type: "success",
            message: "退出登录成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出",
          });
        });
    },
  },
}
</script>

<style lang="scss" scoped>
  html,
  body {
    margin: 0px;
    padding: 0px;

  }
  // 最外层的盒子
  .box{
    width: 100%;
    background-color: #E5E4E5;

    // 头部盒子
    .head{
      // border: 1px solid red;
      height: 80px;
      width: 100%;
      display: flex;
      align-items: center;
      position: sticky;
      top: 0px;
      background-color: #F5F4F5;
      z-index: 999;
      // 欢迎的样式
      .welcome{
        font-size: 30px;
        color: red;
        font-weight: bold;
        margin: 0 30px;
      }
      // hi盒子的样式
      .el-dropdown{
        height: 35px;
        line-height: 35px;
        padding: 0 10px;
        border-radius: 5px;
        background-color: #EDFAEE;
        box-shadow: 0px 0px 2px 1px rgba(128, 128, 128, 0.294);
        margin-right: 30px;
        // 文字的盒子
        .el-dropdown-link {
          cursor: pointer;
          color: #409EFF;
        }
        // 下拉符号的盒子
        .el-icon-arrow-down {
          font-size: 12px;
        }
      }
      // 注册按钮
      .register{
        background-color: #EDFAEE;
        box-shadow: 0px 0px 2px 1px rgba(128, 128, 128, 0.294);
        color: #A8CA91;
        font-weight: bold;
        border: none;
        height: 35px;
        padding: 0px 20px;
      }
      // 占位空盒子
      .empty{
        flex: 1;
      }
      .right_button{
        margin-right: 30px;
        background: #FEF9ED;
        color: #CBB485;
        border: #FEF9ED;
      }
    }
    // 主体盒子
    .body{
      // 搜索盒子
      .search_box{
        width: 2000px;
        margin: 50px auto;
        // 搜索框
        .el-input{
          width: 800px;
        }
        // 搜索按钮
        .search_button{
          margin-left: 30px;
          background: #F86C6E;
          border: #F86C6E;
        }
      }
      // 主体盒子
      .main_box{
        margin: auto;
        width: 2000px;
        background-color: #fff;
        display: flex;
        flex-wrap: wrap;
        // 商品卡样式
        .card{
          // border: 1px solid red;
          box-shadow: 0px 0px 2px 2px rgba(128, 128, 128, 0.294);
          padding: 5px;
          width: 500px;
          margin-left: 100px;
          img{
            height: 500px;
          }
          // 商品名称链接样式
          a{
            display: block;
            color: black;
            font-size: 30px;
          }
          // 价格标签样式
          .price{
            font-style: normal;
            color: #FF501E;
            font-size: 30px;
            font-weight: bold;
            padding-left: 400px;
            em{
              font-style: normal;
              margin-right: 5px;
            }
          }
        }
      }
    }
  }
</style>